<template>
  <div class="display-flex-stream">
    <ui-block
      v-for="(item, index) in newMemery"
      :key="index"
      :program-time="programTime"
      style="flex: 0 0 50px"
      :block="item"
    />
    <!-- :border="memeryNeedBorder[index]" -->
  </div>
</template>
<script>
/**
 * problem2
 */
import UiBlock from "./UIBlock";
export default {
  name: 'UIMemery',
  components: { UiBlock },
  props: {
    programTime: {
      type: Number,
      default() {
        return 0;
      }
    },
    memeryNeedBorder: {
      type: String,
      default() {
        return "[]";
      }
    },
    memery: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
    };
  },
  computed: {
    newMemery() {
      let arr = [];
      let border = JSON.parse(this.memeryNeedBorder);
      this.memery.forEach((ele, index) => {
        if (border[index]) {
          // border  0: default,  1: top & bottom,  2: 
          let value = border[index].value, status = border[index].status;
          let success = "rgb(139, 176, 190)";
          let successBG = " rgb(185, 232, 238)";
          let fail = "red";
          let failBG = "rgb(243, 140, 140)";
          if (value === 1 && status === "success") ele.border = this.getBorder(["top","bottom"], success) + "background:" + successBG;
          if (value === 2 && status === "success") ele.border = this.getBorder(["top","bottom","left"], success) + "background:" + successBG;
          if (value === 3 && status === "success") ele.border = this.getBorder(["top","bottom","right"], success) + "background:" + successBG;
          if (value === 4 && status === "success") ele.border = this.getBorder(["top","bottom","left","right"], success) + "background:" + successBG;
          if (value === 4 && status === "fail") ele.border = this.getBorder(["top","bottom","left","right"], fail) + "background:" + failBG;
        }
        arr.push(ele);
      });
      return JSON.parse(JSON.stringify(arr));
    }
  },
  methods: {
    getBorder(ori, color) {
      let str = "";
      ori.forEach(ele => {
        str += `border-${ele}:1px solid ${color};`;
      });
      return str;
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/index";
div{
  // background:#111;
}
</style>